

  <template>


    <div v-loading="loading" class="baseinfo" style="padding-top:30px;float: left;" >
      
         
              <!-- <h2 style="text-align:center;margin-top: 50px;line-height:30px;color:#666;margin-bottom:3rem"><span style="color:#ff770f">{{userName}}</span> 您好，欢迎使用一步充电智能科技用户管理系统</h2> -->
       

      <div type="flex" justify="space-around" style="width: 60%;">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #59e2e7;">
            <el-col :span="8">
            <img src="@/assets/icon01.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>累计收益</span><br/>
          <span class="amount">{{userIncome == null ? 0 : userIncome}} <span style="font-size:18px">元</span></span>
        </el-col>
        </div>
        </el-col>
  

        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner"  style="border-left: 3px solid #aa6cdf;">
            <el-col :span="8">
            <img src="@/assets/icon07.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>累计电量</span><br/>
          <span  class="amount">{{elecTotleCounter == null ? 0 : elecTotleCounter}} <span style="font-size:18px">度</span></span>
        </el-col>
        </div>
        </el-col>
      </div>

        <div type="flex" justify="space-around" style="width: 60%;">

          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner"  style="border-left: 3px solid #cccccc;">
            <el-col :span="8">
            <img src="@/assets/icon02.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>使用次数</span><br/>
          <span  class="amount">{{useageCounter == null ? 0 : useageCounter}} <span style="font-size:18px">次</span></span>
        </el-col>
        </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner"  style="border-left: 3px solid #ff770f;">
            <el-col :span="8">
            <img src="@/assets/icon06.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>泊位数量</span><br/>
          <span  class="amount">{{lockNumber == null ? 0 : lockNumber}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>
      <!-- </el-row>
      <el-row   type="flex" justify="space-around" style=""> -->
      </div>
        <div type="flex" justify="space-around" style="width: 60%;">
        
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #eeb515;">
            <el-col :span="8">
            <img src="@/assets/icon04.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>占用</span><br/>
          <span  class="amount">{{useCounter == null ? 0 : useCounter}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #4cc846;">
            <el-col :span="8">
            <img src="@/assets/icon05.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>空闲</span><br/>
          <span  class="amount">{{freeCounter == null ? 0 : freeCounter}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>

      </div>
        <div type="flex" justify="space-around" style="width: 60%;">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #10adf8;">
            <el-col :span="8">
            <img src="@/assets/icon08.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>预约</span><br/>
          <span  class="amount">{{ bookCounter == null ? 0 : bookCounter}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #d31309;">
            <el-col :span="8">
            <img src="@/assets/icon03.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>故障</span><br/>
          <span  class="amount">{{ gzCounter == null ? 0 : gzCounter}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>

      </div>



      <div style="
    width: 30%;
    padding: 20px;
    top: 184px;
    right: 28px;
    height: 550px;
    text-align: center;
    color: rgb(255, 255, 255);
    background: rgb(255, 255, 255);
    border-radius: 10px;
    position: absolute;">
  <span style="color: rgb(43 43 44);
    text-align: left;
    width: 96%;
    display: inline-block;
    background: #f6f6f6;
    font-size: 32rpx;
    font-size: 18px;
    padding: 2%;">最近上线场站</span>
      <el-table
      :header-cell-style="{ color:'#606266',background:'#ffffff' }"
      :key="tableKey"
      :row-class-name="warning-row"
      v-loading="listLoading"
      :data="list"
      height="480"
      highlight-current-row
      style="width: 100%;font-size: 15px;border: 0px;margin-top: 10px;border:1px solid #ffffff;background: #ffffff;"
      @sort-change="sortChange"     
    >

      <el-table-column label="场站地址" prop="parkfieldName" align="left" min-width="120px">
        <template slot-scope="{row}">
          <span>{{ row.lockAddress }}</span>
        </template>
      </el-table-column>

      <el-table-column label="编号" prop="id" align="left" min-width="80px">
        <template slot-scope="{row}">
          <span>{{ row.lockMac }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="上线时间" min-width="80px" align="left">
        <template slot-scope="{row}">
          <span>{{ row.createDate.substring(0,11) }}</span>
        </template>
      </el-table-column>
    
    </el-table>
    
  </div>


    
    
        </div>
    
    
      </template>
      
      <script>
      import { getUserInfoApi,lclockApi } from "../../api/runinfo.js";
      import { getNickName,getRoleCode} from "@/util/auth";
      
      export default {
    
        data() {
          return {
            onlineParkLockNum: 12,
            runTime: 4123123,
            amount: 888,
            pageNo:1,
            pageSize:20,
            total:'',
            roleCode:'',
            loading: true,
            listLoading:true,
            roleCode:'',
            userName: "",
            list2:'',
            list:[],
            lockNumber: 0, 
            useageCounter: 0, 
            userIncome: 0, 
            freeCounter: 0,
            useCounter: 0, 
            elecTotleCounter: 0
          }
        },
    
        created() {   
       
          
           
           
        },
        mounted(){
    
          
            var _this = this;
         
          var key = localStorage.getItem("key");
          if(key == '' || key == undefined || key == null){
          this.roleCode = getRoleCode()
          localStorage.setItem("key",this.roleCode)
         
          }else{
            this.roleCode = key
          }
          
         var userName = localStorage.getItem("title");
          if(userName == '' || userName == undefined || userName == null){
            this.userName = getNickName();
            localStorage.setItem("title",this.userName)
          }else{
            this.userName = localStorage.getItem("title");
          }
    
          _this.getUserInfo();
          lclockApi({pageNo:this.pageNo,
            pageSize:this.pageSize,
            roleCode:this.roleCode
          }).then(resp => {
            this.list = resp.data.dataList
          })
    
          setTimeout(() => {
                _this.listLoading = false;
                _this.loading = false;
                }, 1 * 2000);
    
           
        },
        methods: { 
          getUserInfo() {
            console.log("333333333333333333",this.roleCode)
              getUserInfoApi({
                roleCode:this.roleCode
              }).then(resp => {
                if (resp.errmsg === "ok") {
                  var info = resp.data;
                  this.lockNumber = info.lockNumber;
                  this.useageCounter = info.useageCounter;
                  this.userIncome = info.user_income;
                  this.freeCounter = info.freeCounter;
                  this.useCounter = info.useCounter;
                  this.elecTotleCounter = info.elecTotleCounter;
                  this.bookCounter = info.bookCounter;
                  this.gzCounter = info.repairCounter;
          
                } else {
    
                }
              })
              .catch(e => {
    
              });
          },
        }
       
      }
      </script>
    
    
    
    <
      <style scoped>
      h2{
        font-size:28px
      }
      .amount{
        font-weight: 600;
        font-size: 32px;
      }
      .partner{
        background: #ffffff;
        color: rgb(255, 255, 255);
        display: inline-block;
        width:90%;
        min-width:300px;
        padding-top:3%;
        padding-bottom:3%;
        border-radius: 10px;
        margin-bottom:5%;
        text-align: left;
        color: #333;
        padding-left:20px;
          line-height: 40px;
      }
      .baseinfo {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      
      .myrow {
        width: 100%;
        margin: auto;
      }
      
      .myrow > div {
        text-align: center;
      }
      .mycol h1 {
     
        color: #ffffff;
        font-weight: bold;
      }
      
      h1 {
        font-size: 250%;
      }
      
     
      .el-table .warning-row {
      background: #e9aa7e;
      }
      .el-table tr {
          background-color: #642626;
      }
      
      </style> 